import React from 'react';
import { Table, Pagination, Button, Modal, Input, Form, Select } from 'antd';
import axios from 'axios'
import './shoplist.css'
import { useState, useEffect } from "react";
const { Option } = Select;
export default function Shoplist() {
    let [shop, setshop] = useState()
    let [shops, setshops] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    let [guess, setguess] = useState()
    let [category, setcategory] = useState([])
    let [records, setrecords] = useState({})
    const showModal = (record) => {
        records = record
        setrecords(records)
        setIsModalOpen(true);
        axios.get('https://elm.cangdu.org/shopping/v2/restaurant/category').then(res => {
            category = res.data
            setcategory(category)
        })
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    let pages = 1
    const columns = [
        {
            title: '店铺名称',
            dataIndex: 'name',
        },
        {
            title: '店铺地址',
            dataIndex: 'address',
        },
        {
            title: '店铺介绍',
            dataIndex: 'description',
        },
        {
            title: '操作',
            dataIndex: '',
            render: (record) => <a><Button size='small' onClick={() => { showModal(record) }}>编辑</Button><Button size='small'>添加商品</Button> <Button type="primary" danger size='small'>删除</Button></a>,
        },
    ];
    useEffect(() => {
        axios.get('https://elm.cangdu.org/shopping/restaurants/count').then(res => {
            if (res.data.status == 1) {
                setshop(res.data.count)
            }
        })
        axios.get('https://elm.cangdu.org/v1/cities?type=guess').then(res => {
            setguess(res.data.name)
        })
        clk()
    }, []);
    function clk() {
        axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=47.354309&longitude=123.917961&offset=${(pages - 1) * 20}&limit=20`).then(res => {
            shops = res.data
            setshops(shops)
        })
    }
    function change(page) {
        pages = page
        clk()
    }
    return <div className='main'>
        <Table
            columns={columns}
            pagination={false}
            rowKey={'id'}
            expandable={{
                expandedRowRender: (record) => (
                    <p
                        style={{
                            margin: 0,
                        }}
                        className='view demo-table-expand '
                    >
                        <span class="el-form-item__label">店铺名称:{record.name}</span>
                        <span class="el-form-item__label">店铺地址:{record.address}</span>
                        <span class="el-form-item__label">店铺介绍:{record.description}</span>
                        <span class="el-form-item__label">店铺 ID:{record.id}</span>
                        <span class="el-form-item__label">联系电话:{record.phone}</span>
                        <span class="el-form-item__label">评分:{record.rating}</span>
                        <span class="el-form-item__label"> 销售量:{record.recent_order_num}</span>
                        <span class="el-form-item__label">分类:{record.category}</span>
                    </p>
                ),
                rowExpandable: (record) => record.name !== 'Not Expandable',
            }}
            dataSource={shops}
        />
        <Pagination total={shop} showTotal={(shop) => `共${shop}条`}
            showSizeChanger={false} onChange={change} pageSize={shops.length} />
        <Modal title="修改店铺信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText='确定' cancelText="取消" width='747px'>
            <Form>
                <Form.Item label="店铺名称">
                    <Input value={records.name} />
                </Form.Item>
                <Form.Item label="详细地址" >
                    <Input value={records.address} />
                </Form.Item>
                <Form.Item label="当前城市" >
                    <Input value={guess} />
                </Form.Item>
                <Form.Item label="店铺介绍" >
                    <Input value={records.description} />
                </Form.Item>
                <Form.Item label="联系电话" >
                    <Input value={records.phone} />
                </Form.Item>
                <Form.Item label="店铺分类" className='a'>
                    <Select value={records.category} allowClear>
                        {category.map((i, index) => {
                            return <Option value={i.name} key={index}>{i.name}
                                <ul>
                                    {i.sub_categories.splice(1).map((k, index) => {
                                        return <li value={k.name} key={index}>{k.name}</li>
                                    })}
                                </ul>
                            </Option>
                        })}
                    </Select>
                </Form.Item>
                <Form.Item label="商铺图片" >
                    <img src={'//elm.cangdu.org/img/' + records.image_path} alt='' className='img' />
                </Form.Item>
            </Form>
        </Modal>
    </div>
}